<template>
    <div class="common-layout">
        <div class="bigBox">
            <div class="userInfoBox">
                <span class="title">基本信息</span>
                <img :src="userInfoData.head_icon" alt="">
                <span class="nameSpan">
                    <p class="nameP">{{ userInfoData.name }}
                        <!-- <img :src="getPublic('me/修改@3x.png')" alt=""> -->
                    </p>
                    <p>{{ "uid:" + getUid() }}</p>
                </span>
                <span class="btnBox">
                    <button><img :src="getPublic('me/VIP@3x.png')" alt="">{{ '公测用户' }}</button>
                </span>
            </div>
            <div class="userPeggBox">
                <span class="title">我的资产</span>
                <span class="myPeggBox">
                    <p>皮蛋余额</p>
                    <p style="font-size: 48px;">{{ userInfoData.pegg }}</p>
                </span>
                <img class="peggImg" :src="getPublic('me/pegg.png')" alt="">
                <span class="btnBox">
                    <button @click="go('/peggRecharge')">皮蛋充值</button>
                </span>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    getCurrentInstance,
    onMounted,
    toRefs,
    toRaw,
} from "vue";
import { useRouter } from "vue-router";
import { getUid, upUserInfoData } from "../../hooks/auth";
import { getPublic } from "../../request/getPublic"; //获取静态资源
//定义要发送的emit事件
const emit = defineEmits(['openLogin'])
const router = useRouter();
const go = (data: string) => {
    router.push(data)
}
const userInfoData = ref({})//用户信息
const updata = () => {
    upUserInfoData().then((res: any) => {
        if (res.code == 1001) {
            emit('openLogin', true)
        } else if (res.code == 200) {
            userInfoData.value = res.data
        }
    })

}

onMounted(() => {
    updata()
});
</script>

<style scoped>
.peggImg {
    position: absolute;
    width: 39px;
    height: 46px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 20px;
}

.myPeggBox p {
    /** 文本1 */
    font-size: 24px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
}

.myPeggBox {
    margin-left: 40px;
    position: relative;
    display: inline-block;
    text-align: left;
    top: 50%;
    transform: translateY(-50%);
}

.btnBox button img {
    width: 40px;
    height: 40px;
    margin-top: -13px;
    margin-left: unset;
    text-align: 60px;
    vertical-align: middle;
}

.btnBox button {
    width: 154px;
    height: 53px;
    line-height: 53px;
    border-radius: 141px;
    border: 2px solid rgba(254, 197, 6, 1);
    font-size: 18px;
    font-weight: 400;
    background-color: unset;
    color: rgba(0, 0, 0, 1);
    cursor: pointer;
}

.btnBox {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.nameSpan .nameP {
    display: inline-block;
    font-size: 24px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    text-align: left;
}

.userInfoBox .nameSpan img {
    width: 20px;
    height: 20px;
    transform: translate(-50%);
    border-radius: unset;
}

.nameSpan p {
    font-size: 18px;
    font-weight: 400;
    padding: 4px 0;
    color: rgba(128, 128, 128, 1);
}

.nameSpan {
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 20px;
    /* background-color: red; */
    /* vertical-align: middle; */
}

.userInfoBox img {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    position: relative;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
}

.title {
    position: absolute;
    display: block;
    width: 120px;
    border-radius: 20px 20px 20px 0px;
    background: rgba(254, 197, 6, 1);
    border: 2px solid rgba(0, 0, 0, 1);
    transform: translateY(-100%);
    box-sizing: border-box;
    margin-left: -2px;
    text-align: center;
    line-height: 36px;
}

.userInfoBox,
.userPeggBox {
    position: relative;
    width: 76%;
    height: 161px;
    border-radius: 0px 20px 20px 20px;
    border: 2px solid rgba(0, 0, 0, 1);
    box-sizing: border-box;
    margin: 0 auto;
    margin-bottom: 100px;
}

.bigBox {
    position: relative;
    top: 50%;
    transform: translateY(-70%);
}

.common-layout {
    position: relative;
    width: 100%;
    height: 100%;
    /* padding: 50px; */
    box-sizing: border-box;
}
</style>
